<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>数据管理</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
    .hint-text {
      padding: 30px 30px;
    }
    .hint-text .wsp {
      color: #333333;
      font-size: 16px;
    }
    .hint-text .tishi {
      color: #666666;
    }
    .tishi .as1 {
      color: #0e9cf2;
    }
    .tishi .as1:hover {
      text-decoration: underline;
    }
    .data-m {
      padding: 0 30px 30px 30px;
    }
    .xs {
      display: flex;
      height: 50px;
      line-height: 50px;
      margin-bottom: 28px;
      padding-top: 10px;
    }
    .xa {
      flex: 1;
    }
    .x1 .ivu-upload {
      display: inline-block;
    }
    .x1 .sp {
      font-size: 16px;
    }
    .x1 .spoz {
      font-size: 14px;
    }
    .x1 .udata-btn:hover,
    .x1 .udataz-btn:hover {
      border-bottom: 2px solid #0e9cf2;
      padding: 3px 0;
    }
    .xa .up-btn {
      cursor: pointer;
    }
    .x2 {
      display: flex;
      justify-content: flex-end;
    }
    .x2 .pgy {
      font-size: 12px;
    }
    .x2 .pgy .sz {
      font-size: 16px;
      display: inline-block;
      vertical-align: -2px;
    }
    .page-w {
      padding: 30px 20px;
    }
    .tabsp {
      
    }
    .tabsp .ivu-tabs-bar {
      margin-bottom: 30px;
    }
    .tabsp .ivu-tabs-tab {
      width: 130px;
      height: 46px;
      text-align: center;
      padding-top: 12px;
      margin-right: 0;
      color: #999;
      background-color: #fff;
      border: 1px solid #e6e6e6;
    }
    .tabsp .ivu-tabs-tab:hover {
      color: #666;
    }
    .tabsp .ivu-tabs-tab:nth-last-child(2) {
      border-right: none;
    }
    .tabsp .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
      color: #0e9cf2;
      border-color: #e6e6e6 !important;
      background-color: #fff;
    }
    .tabsp .ivu-tabs-tab-active {
      color: #0e9cf2;
      background-color: #fff;
    }
    .tabsp .ivu-tabs-tab-active:hover {
      color: #0e9cf2;
    }
    .tabsp .ivu-tabs-ink-bar {
      background-color: #0e9cf2;
    }
    .tabsp.on .ivu-tabs-ink-bar {
      left: -16px;
    }
    .k_btn {
      
    }
    .ivu-tabs-nav {
      border-bottom: 1px solid #e6e6e6;
    }
    .jindu-bar-bg {
      width: 80%;
      height: 10px;
      border-radius: 100px;
      background: #eee;
      margin-top: 15px;
      position: relative;
    }
    .jindu-bar-bg::before {
      content: attr(upd);
      font-size: 12px;
      position: absolute;
      top: -17px;
      left: 5px;
    }
    .jindu-bar-bg::after {
      content: attr(sud);
      font-size: 12px;
      position: absolute;
      top: -17px;
      right: 5px;
    }
    .jindu-bar {
      height: 100%;
      border-radius: 100px;
      background: #6fc0f2;
      position: relative;
    }
    .jindu-bar::after {
      content: '';
      width: 20px;
      height: 20px;
      background: transparent url(images/lanz.png) no-repeat;
      position: absolute;
      top: -4px;
      right: -2px;
    }
    
    .jindu-time {
      color: #999;
      position: absolute;
      top: -12px;
      right: -61px;
    }
    
    
    .ivu-table-cell {
      overflow: visible;
    }
    .modal1 .ivu-modal-header-inner {
      text-align: center;
      font-size: 16px;
      font-weight: normal;
      color: #999;
      padding: 15px 0 31px 0;
    }
    .modal1 .ivu-modal-footer {
      border-top: 0;
      margin: -10px;
    }
    
    .cun-m {
      font-size: 12px;
      color: #666;
      position: absolute;
      top: 16px;
      right: 30px;
    }
    .cun-m .ls {
      color: #0e9cf2;
    }
    .py1 {
      color: #333;
      text-align: center;
      font-size: 16px;
      margin-bottom: 63px;
      margin-top: 43px;
    }
    .m-btn {
      display: flex;
      justify-content: center;
      align-content: space-between;
    }
    .m-btn .cbtn {
      width: 110px;
      height: 40px;
      border: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 16px;
      padding: 0 10px;
      margin: 0 60px;
    }
    .m-btn .ivu-btn>span {
      vertical-align: -1px;
    }
    .m-btn .cancel-btn {
      color: #999;
      background: #eeeeee;
    }
    .m-btn .cancel-btn:hover {
      border: 0;
    }
    .olan {
      color: #0e9cf2;
    }
    
    .data-ctr .ivu-form-item-content .ivu-btn,
    .x1 .ivu-btn {
      border-radius: 3px;
      height: 26px;
      line-height: 13px;
      margin-right: 13px;
      padding: 5px 13px;
      border: 0;
      color: #fff;
      background-color: #f2880f;
    }
    .x1 .ivu-btn {
      margin-top: -6px;
    }
    .data-ctr .ivu-form-item-content .ivu-btn.down-model-btn,
    .data-ctr .ivu-form-item-content .ivu-btn.down-log-btn {
      background-color: #0e9cf2;
    }
    .data-ctr .ivu-form-item-content .ivu-btn[disabled],
    .x1 .ivu-btn[disabled] {
      color: #999;
      background-color: #eee;
    }
    .x1 .ivu-btn[disabled]:hover {
      background-color: #eee;
      color: #999;
    }
    
    .query-head {
      display: flex;
    }
    .date-pick-fix {
      width: 285px;
      height: 30px;
      line-height: 27px;
      display: flex;
      border-radius: 3px;
      border: 1px solid #eee;
      overflow: hidden;
      margin-right: 30px;
    }
    .date-pick-fix li {
      flex: 1;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 3px;
      cursor: pointer;
    }
    .date-pick-fix li:nth-child(odd) {
      background: #f3f4f4;
    }
    .date-pick-fix li.on {
      background: #0e9cf2;
      color: #fff;
    }
    .f-query {
      flex: 1;
      margin-bottom: 5px;
    }
    .lsb .ivu-form-item-label {
      margin-top: 2px;
    }
    .ivu-table-tbody .my-row-active td {
      background-color: #f0f8fc;
    }
    .ivu-table-cell>span {
      color: #999;
    }
    .up-model,
    .up-data {
      position: relative;
      font-size: 16px;
      color: #0e9cf2;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      padding-bottom: 3px;
    }
    .up-model:hover,
    .up-data:hover {
      border-bottom-color: #0e9cf2;
    }
    .up-model::before,
    .up-data::before {
      font-size: 12px;
      line-height: 12px;
      color: #f00;
      white-space: nowrap;
      position: absolute;
      left: 0;
      bottom: -23px;
      pointer-events: none;
    }
    .up-model.err::before {
      content: '模式格式错误';
    }
    .up-data.err::before {
      content: '数据集格式错误';
    }
    .des-btn-w {
      margin-bottom: 30px;
    }
    .destroy-btn {
      padding: 3px 12px;
      border-radius: 3px;
      background: #f2880f;
    }
    
    .ivu-table-row.my-row-active .ivu-table-cell > span {
      color: #0e9cf2;
    }
    .ivu-table-row.my-row-active .ivu-table-cell .jindu-bar {
      background-color: #0e9cf2;
    }
    .ivu-table-row.my-row-active .ivu-table-cell .jindu-bar::after {
      
      background: transparent url(images/lanx.png) no-repeat;
    }
    .ivu-table thead tr th:first-child {
      background-color: #fff;
    }
    .ivu-table thead tr th:first-child .ivu-table-cell,
    .ivu-table-body tr td:first-child .ivu-table-cell {
      padding-left: 10px;
      padding-right: 10px;
    }
    .ivu-modal-header {
      border-bottom: 2px solid #f2f2f2;
    }
    .ivu-table-column-center {
      position: relative;
    }
    .ivu-checkbox-wrapper::after {
      content: '';
      width: 30px;
      height: 30px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      margin: auto;
    }
    
    #errTip{
      color: #f00;
      margin-left: 10px;
    }
    
    #upMoxin,
    #upDataSt {
      display: none;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="dataManage">
    <div class="main">
      <section class="panel hint-text mb20">
        <p class="wsp mb20">温馨提示</p>
        <p class="tishi">1.请使用谷歌或 <a class="as1" href="http://www.firefox.com.cn/" target="_blank">火狐浏览器</a>
          上传数据集，存储空间 <= 10G，数据集文件格式为：<span class="olan">ZIP</span> 、<span class="olan">TAR</span>、<span class="olan">RAR</span>，上传期间，关闭此界面会导致中断</p>
      </section>
      <section class="panel data-m">
        <div class="xs">
          <div class="xa x1">
            <span class="sp spoz mr20">数据管理</span>

            <label for="upMoxin" class="mr20 up-model" :class="{err: isModelLayoutErr}">上传模型</label>
            <input type="file" id="upMoxin" @change="addChunk($event,2)" v-model="addModel">

            <label for="upDataSt" class="mr20 up-data" :class="{err: isDataSetLayoutErr}">上传数据集</label>
            <input type="file" id="upDataSt" @change="addChunk($event,1)" v-model="addDataSet">
            <span id="errTip" v-if="getErrTip">{{ getErrTip }}</span>
          </div>
          <div class="xa x2">
            <!-- <span class="mr10 hong pgy" v-if='isSpace'>储存空间不足</span> -->
            <p class="pgy">储存空间 : <span class="sz lan">{{G.getfGMK(useSpace * 1024)}}</span> / <span class="sz lan">10
                G</span></p>
          </div>
        </div>

        <Tabs value="name1" class="tabsp" :class="{on: isTabs2}" @on-click="tabClick">
          <tab-pane class="k_btn up_btn" label="正在上传" name="name1">
            <i-form class="data-ctr mb5" inline>
              <form-item>
                <i-button class="down-model-btn" type="primary" @click="stopChunk" :disabled="!isDownModel">暂停</i-button>
                <i-button class="down-log-btn" type="primary" @click="continueChunk" :disabled="!isDownLog">继续</i-button>
                <i-button class="destroy-btn" type="warning" :disabled="!isDelData" @click="delChunk">销毁</i-button>
              </form-item>
            </i-form>

            <i-table class="mb10" :class="{loading: tbLoading}" :columns="columns1" :data="list" size="small" ref="selection"
              border @on-selection-change="changeTable" :row-class-name="trActive" no-data-text="没有相关数据"></i-table>
            <!-- <div class="page-w">
                <Page :total="100" show-total />
              </div> -->
          </tab-pane>
          <tab-pane class="k_btn ls_btn" label="历史记录" name="name2">
            <div class="query-head">
              <ul class="date-pick-fix">
                <li :class="{on : dateActive === index}" @click="choseTabDate(index)" v-for="(item, index) of dateChose"
                  :key="index">{{item}}</li>
              </ul>
              <i-form class="f-query" :model="query" label-position="right" inline @keyup.enter.native="clickQuery">
                <form-item class="lsb w280" label="日期查询 : ">
                  <date-picker class="w200" type="daterange" placement="bottom-center" placeholder="请选择日期查询" @on-change="setDateRange"
                    v-model="query.cTime"></date-picker>
                </form-item>
                <form-item>
                  <i-button type="primary" class="sb-btn" @click="clickQuery">查询</i-button>
                  <!-- <i-button type="reset" class="reset-btn">重置</i-button> -->
                </form-item>
              </i-form>
            </div>

            <i-form class="f-query" :model="query" label-position="right" inline @keyup.enter.native="queryList">
              <form-item class="w180" label="数据类型 : ">
                <i-select class="w100" v-model="query.dataType" @on-change="changeDataType">
                  <i-option :value="0">查看全部</i-option>
                  <i-option :value="1">数据集</i-option>
                  <i-option :value="2">模型</i-option>
                </i-select>
              </form-item>
              <form-item class="w230" label="数据名称 : ">
                <i-input class="w150" clearable placeholder="请输入数据名称" v-model="query.dataName"></i-input>
              </form-item>
              <form-item>
                <i-button type="primary" class="sb-btn" @click="clickQuery2">查询</i-button>
                <i-button type="reset" class="reset-btn" @click="resetQuery2">重置</i-button>
              </form-item>
            </i-form>
            <div class="des-btn-w">
              <i-button class="destroy-btn" type="warning" v-show="isTabs2" :disabled="!isDelHistory" @click="showModal1">销毁</i-button>
            </div>

            <i-table class="mb10" :class="{loading: tbLoading2}" :columns="columns2" :data="list2" size="small" ref="selection"
              border @on-selection-change="changeTable2" :row-class-name="trActive" no-data-text="没有相关数据"></i-table>
            <div class="page-w" v-if="list2.length">
              <Page :total="sizeCount" :page-size="pageSize" :current="currentPage" @on-change="changePage" show-total
                show-elevator />
            </div>
          </tab-pane>
        </Tabs>
      </section>

      <Modal class="modal1" v-model="modal1" title="温馨提示" width="500" class-name="vertical-center-modal" :closable="false">
        <p class="py1">您正在使用销毁数据功能，销毁后数据集（或模型）无法找回。</p>
        <div class="m-btn">
          <i-button class="cbtn del-btn" type="primary" @click="delData1">立即销毁</i-button>
          <i-button class="cbtn cancel-btn" @click="cancelCs">取消</i-button>
        </div>
        <div class="modal-footer" slot="footer"></div>
      </Modal>

    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="js/qs.min.js"></script>
  <script src="js/ipfs-index.js"></script>
  <script src="js/global.js"></script>
  <script>
    var ipfs = window.IpfsTesraApi(ipfsConfig.ip, ipfsConfig.aipPort, ipfsConfig.protocol);
    var vm = new Vue({
      el: '#app',
      data: {
        tbLoading: false,
        tbLoading2: false,
        modal1: false,
        tableSelectArr: [],
        tableSelectArr2: [],
        timeoutArr: [],
        tabName: '',
        dateActive: 0,
        isModelLayoutErr: false,
        isDataSetLayoutErr: false,

        currentPage: 1,
        pageSize: 10,
        sizeCount: 0,
        totalNumber: 0,

        errTips: ['上传失败，当前已有1个数据集正在上传', '存储空间不足', '模型格式错误', '数据集格式错误', '上传失败，当前已有1个模型正在上传', '上传失败，参数错误'],
        errType: -1,

        addModel: '',
        addDataSet: '',

        query: {
          lowerTime: '',
          upperTime: '',
          cTime: [],

          dataType: 0,
          dataName: null,
        },
        dateChose: ['全部', '本月', '上月', '最近3月'],
        columns1: [{
          type: 'selection',
          width: 45,
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'time',
          width: 150,
          align: 'center',
        },
        {
          title: '数据类型',
          key: 'dtype',
          width: 150,
          align: 'center',
        },
        {
          title: '数据名称',
          key: 'dname',
          width: 150,
          align: 'center',
        },
        {
          title: '文件类型',
          key: 'tys',
          width: 150,
          align: 'center',
        },
        {
          title: '文件大小',
          key: 'dsize',
          width: 150,
          align: 'center',
        },
        {
          title: '状态',
          key: 'sdtr',
          width: 150,
          align: 'center',
        },

        {
          title: '进度',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('div', {
              attrs: {
                upd: '上传: ' + params.row.progress + '%',
                sud: G.getfGMK(params.row.loaded) + ' - ' + params.row.speed
              },
              class: 'jindu-bar-bg',
            },
              [h('p', {
                class: 'jindu-bar',
                style: {
                  width: params.row.progress + '%',
                },
              }),
              h('p', {
                class: 'jindu-time',
              }, fTime(params.row.usedTime))
              ])
          },
        },
        ],
        columns2: [{
          type: 'selection',
          width: 45,
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createTime',
          width: 150,
          align: 'center',
        },
        {
          title: '数据类型',
          key: 'dataType',
          width: 150,
          align: 'center',
        },
        {
          title: '数据名称',
          key: 'dataName',
          width: 150,
          tooltip: true,
          align: 'center',
        },
        {
          title: '文件类型',
          key: 'fileType',
          width: 150,
          align: 'center',
        },
        {
          title: '文件大小',
          key: 'fileSize',
          width: 150,
          align: 'center',
        },
        {
          title: ' ',
          key: 'iks',
          align: 'center',
          render: (h, params) => {
            var text = params.row.iks
            return h('div', {
              style: {
                color: '#f20e0e',
              },
            }, text)
          },
        },
        ],
        list: [],
        list2: [],
        upDataset: false,
        upModel: false,
        useSpace: 0,
        uid: 0,
      },
      created() {
        this.initView();
        this.timerRun();
        this.requestList2();
      },
      methods: {
        changeDataType(){
          this.requestList2();
        },
        trActive(row, index) {
          if (row._checked) {
            return 'my-row-active'
          }
        },
        clickQuery() {
          this.currentPage = 1
          this.dateActive = 0
          this.query.dataType = 0
          this.query.dataName = null
          this.requestList2()
        },

        clickQuery2() {
          this.currentPage = 1
          this.dateActive = 0
          this.query.cTime = []
          this.query.lowerTime = null
          this.query.upperTime = null
          if (this.query.dataType == 0) {
            this.query.dataType = 0
          }
          this.requestList2()
        },


        // 选择日期查询
        choseTabDate: G.debounce(function(index) {
          this.dateActive = index
          this.query.cTime = []
          switch (index) {
            case 0://全部
              this.query.lowerTime = null;
              this.query.upperTime = null;
              break;
            case 1://本月
              this.query.lowerTime = moment().startOf('month').format('YYYY-MM-DD');
              this.query.upperTime = moment().endOf('month').format('YYYY-MM-DD');
              break;
            case 2://上月
              let pDate = moment().subtract(1, 'month');
              this.query.lowerTime = pDate.startOf('month').format('YYYY-MM-DD');
              this.query.upperTime = pDate.endOf('month').format('YYYY-MM-DD');
              break;
            case 3://最近3月
              let p3Date = moment().subtract(2, 'month');
              this.query.lowerTime = p3Date.startOf('month').format('YYYY-MM-DD');
              this.query.upperTime = moment().endOf('month').format('YYYY-MM-DD');
              break;

            default:
              break;
          }
          this.query.dataType = 0
          this.query.dataName = null
          this.currentPage = 1
          this.requestList2()
        }, G.DEBOUNCE_DELAY || 200),

        // 重置查询2
        resetQuery2() {
          this.query.dataType = 0
          this.query.dataName = null
        },

        setDateRange(arr) {
          this.query.lowerTime = arr[0]
          this.query.upperTime = arr[1]
        },

        pause() {
          console.log(22)
          this.$Message.error('请选择数据')
        },
        play() {
          console.log(11)
        },
        showModal1() {
          this.modal1 = true
        },
        cancelCs() {
          this.modal1 = false
        },
        changeTable(selection) {
          this.tableSelectArr = selection
        },
        changeTable2(selection) {
          this.tableSelectArr2 = selection
        },
        isTableSomeSelected() {
          return this.tableSelectArr.length !== 0 && !this.isListEmpty()
        },
        isTableSomeSelected2() {
          return this.tableSelectArr2.length !== 0 && !this.isList2Empty()
        },
        tabClick(name) {
          this.tabName = name
        },

        initView() {
          var url = '/dataManager/getUseSpace';
          // 立即提交
          axios.get(url)
            .then(res => {
              if (res.data.code == 1) {
                this.useSpace = res.data.data.space
                this.uid = res.data.data.uid
              }
            })
            .catch(err => {
              console.log(err)
            });
        },

        showErrTip(text) {
          if (this.timeoutArr.length > 0) {
            this.timeoutArr.forEach((timer) => {
              clearTimeout(timer);
            })
          }
          this.errText = '' + text;
          let timer = setTimeout(() => {
            this.errText = '';
            this.timeoutArr.push(timer);
          }, 1000);
        },

        saveData(item, hash) {
          var url = "/dataManager/add";
          var data = {
            'uid': this.uid,
            'dataHash': hash,
            'dataName': item.dname,
            'fileType': item.tys,
            'fileSize': item.fileObj.size / 1024,
            'dataType': item.type
          }
          // 立即提交
          axios.post(url, G.paramsSerializer(data))
            .then(res => {
              if (item.type == 1) {
                this.upDataset = false;
              } else if (item.type == 2) {
                this.upModel = false;
              }
              if (res.data.code == 1) {
                item.state = 4;
                item.sdtr = '上传成功';
                this.errType = -1;
                this.initView();
                setTimeout(() => {
                  this.list = this.list.filter(item => {
                    if (item.state == 4) {
                      return false;
                    }
                    return true;
                  });
                }, 2000);
              } else {
                item.state = 3;
                item.sdtr = '上传失败';
              }
            })
            .catch(err => {
              if (item.type == 1) {
                this.upDataset = false;
              } else if (item.type == 2) {
                this.upModel = false;
              }
              item.state = 3;
              item.sdtr = '上传失败';
            });
        },
        delData1() {
          var temp = [];
          this.list2.forEach(item => {
            if (item._checked) {
              temp.push(item.id);
            }
          });
          var url = '/dataManager/delete';
          var data = {
            'ids': temp
          };
          axios.post(url, G.paramsSerializer(data))
            .then(res => {
              this.modal1 = false
              if (res.data.code == 1) {
                this.requestList2();
                this.initView();
              }
            })
            .catch(err => {
              this.modal1 = false
            });
        },
        // 计时函数
        timerRun() {
          setInterval(() => {
            this.list.forEach(item => {
              if (item.state == 1) {
                item.usedTime++;
              }
            })
          }, 1e3)
        },
        addChunk(event, type) {
          // console.log(this.addDataSet);
          // console.log(this.addModel);
          this.addDataSet = '';
          this.addModel = '';
          console.log('upDataset ', this.upDataset);
          console.log('upModel ', this.upModel);
          if (type == 1 && this.upDataset) {
            this.errType = 0;
            return;
            // return this.$Modal.error({
            //   title: '上传失败',
            //   content: '当前已有1个数据集正在上传',
            // })
          } else if (type == 2 && this.upModel) {
            this.errType = 4;
            return;
            // return this.$Modal.error({
            //   title: '上传失败',
            //   content: '当前已有1个模型正在上传',
            // })
          } else if (!type) {
            this.errType = 5;
            return;
            // return this.$Modal.error({
            //   title: '上传失败',
            //   content: '参数错误',
            // })
          }

          if (event.target.files.length > 0) {
            var sp = this.list.reduce((acc, cur) => {
              if (cur.state == 1 || cur.state == 2) {
                return acc + cur.fileObj.size;
              } else {
                return acc;
              }
            }, 0);
            var file = event.target.files[0];
            if ((this.useSpace + (sp + file.size) / 1024) > 10 * 1024 * 1024) {
              this.errType = 1;
              return;
              // return this.$Message.error('储存空间不足');
            }
            var temp = {
              state: 0, //0未开始，1上传中，2已暂停，3失败，4成功
              _checked: false,
              id: Math.floor(Math.random() * Math.pow(10, 12)),
              'type': type,
              time: moment().format('YYYY-MM-DD HH:mm'),
              dtype: type == 1 ? '数据集' : '模型',
              dname: file.name.substring(0, file.name.lastIndexOf('.')),
              tys: file.name.substring(file.name.lastIndexOf('.') + 1),
              dsize: G.getfGMK(file.size),
              sdtr: '上传中',
              loaded: 0,
              total: 1,
              progress: 0,
              speed: '0K/s',
              usedTime: 0,
              fileObj: file,
            };
            console.log(temp.time);
            if (!/^(ZIP|TAR|RAR)$/i.test(temp.tys)) {
              if (type == 1) {
                this.errType = 3;
              } else {
                this.errType = 2;
              }
              return;
              // return this.$Message.error('数据格式错误');
            }
            this.errType = -1;  //开始上传
            this.list.push(temp)
            var oldDate = Date.now();
            temp.state = 1;
            if (type == 1) {
              this.upDataset = true;
            } else if (type == 2) {
              this.upModel = true;
            }
            temp.ipfsObj = ipfs.addChunker(temp.fileObj, {
              progress: G.throttle(function (l, t) {
                temp.progress = G.roundFixed(l * 100 / t, 2);
                var newDate = Date.now();
                temp.speed = G.getfGMK((l - temp.loaded) / ((newDate - oldDate) / 1000)) + '/s'
                oldDate = newDate;
                temp.loaded = l;
                temp.total = t;
              }, 1000)
            }, (err, result) => {
              console.log('addChunker err');
              temp.speed = '0K/s';
              if (err) {
                if (type == 1) {
                  this.upDataset = false;
                } else if (type == 2) {
                  this.upModel = false;
                }
                temp.state = 3;
                temp.sdtr = '上传失败';
                console.log(err);
                return;
              }
              this.saveData(temp, result.Hash);
            });
          }
        },
        stopChunk() {
          this.list.forEach(item => {
            if (item.state == 1 && item._checked) {
              item.state = 2;
              item.sdtr = '已暂停';
              ipfs.stopChunker(item.ipfsObj);
            }
          })
        },
        continueChunk() {
          this.list.forEach(item => {
            if ((item.state == 2) && item._checked) {
              item.state = 1;
              item.sdtr = '上传中';
              this.errType = -1;
              var oldDate = Date.now();
              item.ipfsObj = ipfs.addChunker(item.fileObj, {
                progress: G.throttle(function (l, t) {
                  item.progress = G.roundFixed(l * 100 / t, 2);
                  var newDate = Date.now();
                  item.speed = G.getfGMK((l - item.loaded) / ((newDate - oldDate) / 1000)) + '/s'
                  oldDate = newDate;
                  item.loaded = l;
                  item.total = t;

                }, 1000)
              }, (err, result) => {
                item.speed = '0K/s';
                if (err) {
                  if (type == 1) {
                    this.upDataset = false;
                  } else if (type == 2) {
                    this.upModel = false;
                  }
                  item.state = 3;
                  item.sdtr = '上传失败';
                  console.log(err);
                  return;
                }
                this.saveData(item, result.Hash);
              });
            }
          })
        },
        delChunk() {
          this.list = this.list.filter(item => {
            if (item._checked) {
              if (item.state == 1 || item.state == 2) {
                if (item.type == 1) {
                  this.upDataset = false;
                } else if (item.type == 2) {
                  this.upModel = false;
                }
                if (item.state == 1) {
                  ipfs.stopChunker(item.ipfsObj);
                }
              }
              return false;
            }
            return true;
          })
        },
        // 历史记录
        // 查询数据
        requestList2(query) {
          this.tbLoading2 = true
          query = query || this.query
          var realUrl = '/dataManager/getDataHistory';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/zs' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl

          var ydata = {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          }
          var zdata = Object.assign(query, ydata);
          var data = G.paramsSerializer(zdata)
          // 立即提交
          axios.post(url, data).then(res => {
            if (res.data.code == 1) {
              this.tbLoading2 = false
              this.sizeCount = res.data.data.total
              this.currentPage = res.data.data.pageNum
              this.pageSize = res.data.data.pageSize
              var temp = res.data.data.list;
              temp.forEach(item => {
                item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm');
                item.dataType = item.dataType == 1 ? '数据集' : '模型';
                item._checked = false;
                item.fileSize = G.getfGMK(item.fileSize * 1024)
                item._disabled = !item.del;
                if (!item.del) {
                  item.iks = '队列中或处理中, 数据无法删除';
                }
              });
              this.list2 = temp;
            }
          })
            .catch(err => {
              console.log(err)
            });
        },
        // 分页
        changePage(page) {
          this.currentPage = page
          this.requestList2()
        },
        isListEmpty() {
          return this.list.length === 0
        },
        isList2Empty() {
          return this.list2.length === 0
        }
      },
      computed: {
        isDownModel() {
          return this.isTableSomeSelected()
        },
        isDownLog() {
          return this.isTableSomeSelected()
        },
        isDelData() {
          return this.isTableSomeSelected()
        },
        isTabs2() {
          return this.tabName === 'name2'
        },
        isDelHistory() {
          return this.isTableSomeSelected2()
        },
        isSpace() {
          return this.useSpace > 9 * 1024 * 1024;
        },
        getErrTip() {
          return this.errType < 0 ? false : this.errTips[this.errType]
        }

        // errText() {
        //   if (isSpace) {
        //     return errTips.errNoSpace;
        //   }
        //   if (isModelLayoutErr) {
        //     return errTips.errModelFormat
        //   }

        //   if (isDataSetLayoutErr) {
        //     return errTips.errDataSet
        //   }

        //   if (true) {
        //     return errTips.errUp
        //   }
        // }
      },
      watch: {
        tableSelectArr: {
          handler(newVal) {
            this.list.forEach(v => {
              v._checked = false
            })
            newVal.forEach(v => {
              this.list.forEach(cur => {
                if (cur.id === v.id) {
                  cur._checked = true
                }
              })
            })
          },
          deep: true,
        },
        tableSelectArr2: {
          handler(newVal) {
            this.list2.forEach(v => {
              v._checked = false
            })
            newVal.forEach(v => {
              this.list2.forEach(cur => {
                if (cur.id === v.id) {
                  cur._checked = true
                }
              })
            })
          },
        },
        list(newVal) {
          if (this.isListEmpty()) {
            this.tableSelectArr = [];
          }
        },
        list2(newVal) {
          if (this.isList2Empty()) {
            this.tableSelectArr2 = [];
          }
        },
      },
      // query:{
      //   handler(value){
      //     console.log("666",value);
      //   }
      // }
    })

    function fTime(ts) {
      var o = {
        "hh": parseInt(ts / (60 * 60)), //时   
        "mm": parseInt((ts % (60 * 60)) / 60), //分   
        "ss": parseInt((ts % (60 * 60)) % 60), //秒   
        "S": ts //总秒   
      };
      var temp = o.hh + ':';
      if (o.mm < 10) {
        temp = temp + '0' + o.mm;
      } else {
        temp = temp + o.mm;
      }
      temp += ':'
      if (o.ss < 10) {
        temp = temp + '0' + o.ss;
      } else {
        temp = temp + o.ss;
      }
      return temp;
    }
  </script>
</body>

</html>